<template>
  <div class="order-detail-page">
    <Navbar :title="'申请记录详情'"></Navbar>
    <div class="order-detail">
      <div class="detail-header">
        <div class="detail-header-one">
          <img
            src="@/assets/tabs/success.png"
            alt=""
            style="margin-right: 20px"
          />
          <h2>已经寄出</h2>
        </div>
        <p>您的报告已寄出,请耐心等待</p>
      </div>
      <div class="detail-body">
        <h4>物流信息</h4>
        <div class="detail-body-two">
          <div class="detail-body-two-one">
            <div class="detail-body-little">
              <span>领取方式</span>
              <span>邮寄</span>
            </div>
            <div class="detail-body-little">
              <span>物流快递</span>
              <span>顺丰快递</span>
            </div>
            <div class="detail-body-little">
              <span>物流详情</span>
              <span style="cursor: pointer;color: #0099FF;" @click="clickMap()">查看</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-body">
        <h4>患者信息</h4>
        <div class="detail-body-two">
          <div class="detail-body-two-one">
            <div class="detail-body-little">
              <span>患者名称</span>
              <span>{{ item.username }}</span>
            </div>
            <div class="detail-body-little">
              <span>身份证号</span>
              <span>{{ item.card }}</span>
            </div>
            <div class="detail-body-little">
              <span>本人电话</span>
              <span>{{ item.phone}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-body">
        <h4>申请信息</h4>
        <div class="detail-body-two">
          <div class="detail-body-two-one">
            <div class="detail-body-little">
              <span>申请类型</span>
              <span>入院病案复印</span>
            </div>
            <div class="detail-body-little">
              <span>复印用途</span>
              <span>医保报销</span>
            </div>
            <div class="detail-body-little">
              <span>申请时间</span>
              <span>
                {{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}
              </span>
            </div>
            <div class="detail-body-little">
              <span>复印内容</span>
              <!-- 多出内容省略号 -->
              <span>
                {{ item.list.slice(0,3).join("、") }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "./component/Navbar.vue";

import axios from "axios";
import { ref } from "vue";
import { onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import moment from "moment";
const router = useRouter();
const route = useRoute();
const item = ref<Item>({
  username: "",
  card: 0,
  addmissNumber: 0,
  _id: "",
  num: 1,
  phone: 16650566935,
  address: "",
  list: [],
  time: new Date(),
  status: 0,
  reason: "",
});
interface Item {
  username: string;
  card: Number;
  addmissNumber: Number;
  _id: string;
  phone: Number;
  address: string;
  list: Array<string>;
  time: Date;
  status: Number;
  reason: string;
  num: Number;
}

onMounted(() => {
  getItem();
});
const clickMap=()=>{
  router.push({ path: "/map", query: { address: item.value.address,status:String(item.value.status) } });
}
const getItem = async () => {
  let {
    data: { data },
  } = await axios.post("http://localhost:3000/zhc/getOrderDetail", {
    _id: route.query._id,
  });
  item.value = data;
};
</script>

<style scoped lang="scss">
.order-detail-page {
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  .order-detail {
    background-color: rgb(242, 242, 239);
    width: 100%;
    margin-top: 46px;
    height: calc(100% - 46px);
    .detail-header {
      padding: 0px 15px;
      box-sizing: border-box;
      margin-top: 15px;
      color: rgb(9, 186, 218);
      background-color: rgb(218, 255, 252);

      padding: 20px;
      box-sizing: border-box;
      .detail-header-one {
        display: flex;
      }
      p {
        line-height: 40px;
      }
    }
    .detail-body {
      margin-top: 10px;
      padding: 0px 15px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      background-color: white;
      h4 {
        line-height: 40px;
      }
      .detail-body-two {
        width: 100%;
        .detail-body-two-one {
          width: 100%;
          .detail-body-little {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>